<template>
	<div class="app-list-container">
		<div class="app-main-header-title flexrbc">
			<div class="app-header-text">电梯地址列表</div>
		</div>
		<el-table ref="multipleTable" class="el-table-filter" :data="tableData" :height="tableHeight"
			style="width: 100%; margin-bottom: 20px" row-key="id" :header-cell-style="{
                'background-color': '#F1F4F7', 
              }" default-expand-all>
			<el-table-column prop="cusdeviceNo" label="电梯标号" align="center">
			</el-table-column>
			<el-table-column prop="cusdeviceName" label="所属单位" align="center">
			</el-table-column>
			<el-table-column prop="address" label="电梯地址" align="center">
			</el-table-column>
			<el-table-column prop="address" label="详细地址" align="center">
			</el-table-column>
			<el-table-column prop="isFault" label="查看地图" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="forMap(scope.row)">查看</el-button>
				</template>
			</el-table-column>
		<!-- 	<el-table-column prop="" align="center" label="状态">
				<template slot-scope="scope">
					<el-button type="text" @click="editData(scope.row)">当前电梯</el-button>
				</template>
			</el-table-column> -->
		</el-table>
		<!-- <pagination :total="total" :page-number.sync="queryCondition.page" :page-size.sync="queryCondition.limit"
			@pagination="getList" /> -->
	</div>
</template>

<script>
	import pagination from "@/components/pagination";
	import api from "@/api/http.js";
	import {
		mapGetters,
		mapActions,
		mapMutations
	} from "vuex";
	export default {
		components: {
			pagination
		},
		data() {
			return {

				total: 0,

				tableData: [{
					cusdeviceName: '科研电梯',
					cusdeviceNo: '0000258543000001',
					projectName: '电梯部',
					address: '北京市北京市顺义区',
				}],
				queryCondition: {
					page: 1,
					limit: 20,
				},
				tableProps: {
					hasChildren: 'hasChildren',
					children: 'children'
				}
			};
		},
		created() {},
		mounted() {
			this.getCusdevices()
		},
		methods: {
			forMap(e){
				this.$message({
					type:'success',
					message:'功能暂未开放，敬请期待'
				})
			},
			getCusdevices() {
				api.getCusdevices().then(res => {
					console.log(res, '获取设备列表')
				}).catch(err => {
					console.log(err, '获取设备列表-err')
				})
			},
			editData(row) {}
		},
	};
</script>

<style scoped>
	.risk-icon {
		width: 20px;
		height: 20px;
		color: #ff0000;
		vertical-align: middle;
	}

	.normal-icon {
		width: 20px;
		height: 20px;
		color: #00ff00;
		vertical-align: middle;
	}
</style>
<style scoped lang="less">
	.el-table /deep/ .el-tree-node__expand-icon.expanded {
		-webkit-transform: rotate(0deg);
		transform: rotate(90deg);
	}

	/* //有子节点 且未展开 */
	.el-table /deep/ .el-icon-arrow-right:before {
		content: "\e791";
		width: 21px;
		height: 21px;
		font-size: 21px;
		background-size: 21px;
		color: #bfbfbf;
	}

	/* //有子节点 且已展开 */
	.el-table /deep/ .el-table__row.expanded .el-icon-arrow-right:before {
		// background: url("./images/folderOpen.png") no-repeat 0 3px;
		width: 21px;
		height: 21px;
		font-size: 21px;
		background-size: 21px;
		content: "\e791";
		color: #bfbfbf;
	}

	.el-table /deep/ .el-table__row {
		.region-icon {
			margin-left: 21px;
		}
	}

	.el-table /deep/ .el-table__row--level-0,
	.el-table /deep/ .el-table__row--level-1 {
		.el-table__indent {
			padding-left: 32px !important;
		}

		.region-icon {
			margin-left: 0px !important;
		}
	}

	.el-table /deep/ .el-table__row--level-2 {
		.el-table__indent {
			padding-left: 64px !important;
		}

		.region-icon {
			margin-left: 0px !important;
		}
	}
</style>